{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
	<title>Home</title>
	<meta charset="utf-8">
	</meta>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="../static/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="../static/css/video-js.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="../static/css/build.css">
	<link rel="stylesheet" href="../static/css/common.css">
	<link rel="stylesheet" href="../static/css/home.css">
	<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript"></script>
	<script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="../static/js/myScript.js" type="text/javascript"></script>
	<script src="../static/js/video.js" type="text/javascript"></script>
	<link rel="stylesheet" href="../static/assets/hivideo.css" />
	<script type="text/javascript" src="../static/js/hivideo.js"></script>
	<style type="text/css">
		/*body{}*/
		body {
			/*margin:0;padding:0;font-size:12px;*/
			/* 加载背景图 */
			/* background-image: url(../static/images/66.jpg); */

			/*background:rgba(255,255,255,0.3);*/
			/*filter:alpha(opacity=40); */

			/* 背景图垂直、水平均居中 */
			background-position: center center;

			/* 背景图不平铺 */
			background-repeat: no-repeat;

			/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
			background-attachment: fixed;

			/* 让背景图基于容器大小伸缩 */
			background-size: cover;
		}

		img {
			opacity: 0.4;
			filter: alpha(opacity=40);
			/*  IE8 及其更早版本 */
		}

		ul.lanren {
			width: 300px;
			margin: 60px auto;
		}

		.scale_panel {
			color: #999;
			width: 200px;
			position: absolute;
			line-height: 18px;
			left: 135px;
			top: 3px;
		}

		.scale_panel .r {
			float: right;
		}

		.scale span {
			background: url(../static/images/scroll.gif) no-repeat;
			width: 8px;
			height: 16px;
			position: absolute;
			left: -2px;
			top: -5px;
			cursor: pointer;
		}

		.scale {
			background-repeat: repeat-x;
			background-position: 0 100%;
			background-color: #E4E4E4;
			border-left: 1px #83BBD9 solid;
			width: 200px;
			height: 3px;
			position: relative;
			font-size: 0px;
			border-radius: 3px;
		}

		.scale div {
			background-repeat: repeat-x;
			background-color: #3BE3FF;
			width: 0px;
			position: absolute;
			height: 3px;
			width: 0;
			left: 0;
			bottom: 0;
		}

		.lanren li {
			font-size: 12px;
			line-height: 50px;
			position: relative;
			height: 50px;
			list-style: none;
		}

		.vid-wrap {
			width: 100%;
			background: #000;
			position: relative;
			padding-bottom: 50.25%;
			/*需要用padding来维持16:9比例,也就是9除以16*/
			height: 0;
		}

		.vid-wrap video {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%
		}

		#progressWrap {
			background-color: #331e38;
			height: 25px;
			cursor: pointer;
		}

		#playProgress {
			color: white;
			background-color: #3ea1ce;
			width: 0px;
			height: 25px;

		}

		#showProgress {
			background-color: ;
			font-weight: 600;
			font-size: 20px;
			line-height: 25px;
		}
	</style>
</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
				 aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">SeaHawk</a>
			</div>
			<div id="navbar" class="collapse navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="/analyze">analyze</a></li>
					<li><a href="/home">comment</a></li>
				</ul>
			</div>
		</div>
	</nav>

	<div class="container-fluid wrapper">
		<div id="Headrow" class="row">
			第<input name="schedule" type="button" id="schedule" class="btn btn-default" value="01 / 20" />个视频
		</div>

		<div class="row">
			<div class="col-md-5" style="text-align:right;">
				<video id="video1" class="vd" ishivideo="false" autoplay="false" isrotate="false" autoHide="false">
					<source id="vpath1" src="" type='video/mp4'>
				</video>
			</div>
			<div class="col-md-2" style="text-align:center;">
				<div class="row" align="center" style="margin-top: 60%;">
					<h1 style="font-size: 60px;color:#331e38;">VS</h1>
				</div>
				<div class="row" align="center" style="margin-top: 20%;" id="discuss">
					<button id="leftgod" type="button" class="btn btn-md btn-pp" disabled='disabled'>左边好</button>
					<button id="almost" type="button" class="btn btn-md btn-default" disabled='disabled'>差不多</button>
					<button id="rightgod" type="button" class="btn btn-md btn-blue" disabled='disabled'>右边好</button>
					<input name="schedule" type="button" id="td_id" style="display:none" value="" />
				</div>

			</div>
			<div class="col-md-5" style="text-align:left;">
				<video id="video2" class="vd" ishivideo="false" autoplay="false" isrotate="false" autoHide="false">
					<source id="vpath2" src="" type='video/mp4'>
				</video>
			</div>
		</div>
		<div class="row">
			<div class="videoPlayer" id="videoContainer" style="margin:0 auto;margin-left: 20%;margin-right: 20%;">
				<video id="video" preload controls style="display:none">
				</video>
				<div id="videoControls" style="">
					<div id="progressWrap">
						<div id="playProgress">
							<span id="showProgress">0</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row operate-btns">
			<div class=" btn-group" role="group" aria-label="...">
				<button id="none" type="button" class="btn btn-lg btn-default" style="display:none">None</button>
				<button id="playBtn" type="button" class="btn btn-lg btn-default">Play<font id="seeme">&nbsp;&nbsp;&nbsp;</font></button>
				<button id="pauseBtn" type="button" class="btn btn-lg btn-default" style="display:none">Pause</button>
				<button id="submit" type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#myModal" disabled='disabled'
				 onclick="SubmitLottery()">Submit<font class="popover-show" title="该组视频已播放完毕" data-container=".tips" data-toggle="popover" data-placement="right"
				 data-content="请先提交数据，谢谢！"></font></button>
				 <span class="tips">
					 
				 </span>
			</div>
			
		</div>
	</div>
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h3 class="modal-title" id="myModalLabel">
						感谢您的参与！
					</h3>
				</div>
				<div class="modal-body">
					<p>原始视频占比：<input type="button" id="yuanshi" value="" /></p>
					<p>超分视频占比：<input type="button" id="chaofen" value="" /></p>
					<p>无差异视频占比：<input type="button" id="wuchayi" value="" /></p>
				</div>
				<div class="modal-body">
					按下 ESC 按钮退出。
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">
						关闭
					</button>
					<button type="button" class="btn btn-primary" id="reload">
						再玩一次
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	<nav class="navbar navbar-inverse navbar-fixed-bottom">
		<div class="container">
			@copyright HuaWei
		</div>
	</nav>
	<script>
		(function (window, document) {
			// 获取要操作的元素
			// var video = document.getElementById("video");
			var video1 = document.getElementById("video1");
			var video2 = document.getElementById("video2");
			var videoControls = document.getElementById("videoControls");
			var videoContainer = document.getElementById("videoContainer");
			var controls = document.getElementById("video_controls");
			var playBtn = document.getElementById("playBtn");
			var fullScreenBtn = document.getElementById("fullScreenBtn");
			var progressWrap = document.getElementById("progressWrap");
			var playProgress = document.getElementById("playProgress");
			var fullScreenFlag = false;
			var progressFlag;

			// 设置开始视频默认开始时间
			// video1.currentTime="2";
			// video2.currentTime="2";

			// 创建我们的操作对象，我们的所有操作都在这个对象上。
			var videoPlayer = {
				init: function () {
					var that = this;
					// video.removeAttribute("controls");
					// bindEvent(video, "loadeddata", videoPlayer.initControls);
					bindEvent(video1, "loadeddata", videoPlayer.initControls);
					bindEvent(video2, "loadeddata", videoPlayer.initControls);
					videoPlayer.operateControls();
				},
				initControls: function () {
					videoPlayer.showHideControls();
				},
				showHideControls: function () {
					bindEvent(video, "mouseover", showControls);
					bindEvent(videoControls, "mouseover", showControls);
					bindEvent(video, "mouseout", hideControls);
					bindEvent(videoControls, "mouseout", hideControls);
				},
				operateControls: function () {
					bindEvent(playBtn, "click", play);
					bindEvent(video, "click", play);
					bindEvent(pauseBtn, "click", pause);
					bindEvent(progressWrap, "mousedown", videoSeek);
				}
			}

			videoPlayer.init();

			// 原生的JavaScript事件绑定函数
			function bindEvent(ele, eventName, func) {
				if (window.addEventListener) {
					ele.addEventListener(eventName, func);
				}
				else {
					ele.attachEvent('on' + eventName, func);
				}
			}
			// 显示video的控制面板
			function showControls() {
				videoControls.style.opacity = 1;
			}
			// 隐藏video的控制面板
			function hideControls() {
				// 为了让控制面板一直出现，我把videoControls.style.opacity的值改为1
				videoControls.style.opacity = 1;
				// console.log("@")
			}
			// 控制video的播放
			function play() {
				if (video.paused || video.ended) {
					if (video.ended) {
						video.currentTime = 0;
					}
					video1.play();
					video2.play();
					$("#playBtn").css("display", "none");
					$("#pauseBtn").css("display", "block");
					$('#leftgod').removeAttr("disabled");
					$('#rightgod').removeAttr("disabled");
					$('#almost').removeAttr("disabled");
					progressFlag = setInterval(getProgress, 60);
				} else {
					console.log("播放");
				}
			}
			// 控制video是否全屏，额这一部分没有实现好，以后有空我会接着研究一下
			function fullScreen() {
				if (fullScreenFlag) {
					videoContainer.webkitCancelFullScreen();
				}
				else {
					videoContainer.webkitRequestFullscreen();
				}
			}
			//重写暂停
			function pause() {
				if (pause) {
					$("#playBtn").css("display", "block");
					$("#pauseBtn").css("display", "none");
					video1.pause();
					video2.pause();

				}
			}
			// video的播放条
			function getProgress() {
				var percent = video1.currentTime / video1.duration;
				playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
				showProgress.innerHTML = (percent * 100).toFixed(1) + "%";
			}
			// 鼠标在播放条上点击时进行捕获并进行处理
			function videoSeek(e) {
				if (video1.paused || video1.ended) {
					play();
					enhanceVideoSeek(e);
				}
				else {
					enhanceVideoSeek(e);
				}

			}
			function enhanceVideoSeek(e) {
				clearInterval(progressFlag);
				var length = e.pageX - progressWrap.offsetLeft;
				var percent = length / progressWrap.offsetWidth;
				playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
				video1.currentTime = percent * video1.duration;
				video2.currentTime = percent * video2.duration;
				progressFlag = setInterval(getProgress, 60);
			}

		}(this, document))


		//隐藏项
		// $("#score").hide();
		// $("#setting").hide();
		//end
		//   window.alert = function (name) {
		// 	const iframe = document.createElement('IFRAME');
		// 	iframe.style.display = 'none';
		// 	iframe.setAttribute('src', 'data:text/plain,');
		// 	document.documentElement.appendChild(iframe);
		// 	window.frames[0].window.alert(name);
		// 	iframe.parentNode.removeChild(iframe);
		// 	VideoPause();
		// };
		// $.alerts.alert("点击下方确认按钮刷新页面", "温馨提示","确定",function(){
		// 	window.location.reload();
		// });
		//video

		function GetVideoUrlPath() {
			var vlist;
			$.ajax({
				type: 'get',
				async: false, //同步执行
				url: '/home/v1.1/video/path/', //路由加'/'否则会报ssh错误
				data: {},
				dataType: 'json',
				success: function (data) {
					vlist = data
					// location.reload()    //成功刷新界面
				},
				error: function (errorMsg) {
					$("#main3").html('<h2 id="chart3-nodata" style="text-align: center;line-height: 180px">暂无数据</h2>')
				}
			})
			return vlist
		}
		var vListdata = GetVideoUrlPath();
		var video1 = $('#video1');
		var video2 = $('#video2');
		var curr = 1, i = 0, video_id = 1, fraction_vo = 0, fraction_vt = 0, videoStatus = 0, vlc = '', xhs = 0, notes, setting_val = 0, c;
		var ersr_good = '', ersr_bad = '', ersr_same = '';
		var good_count = 0, bad_count = 0, same_count = 0, WhetherChoose = 0;
		var dlist = vListdata['td_id']
		var vList1 = vListdata['od_url']
		var vList2 = vListdata['sri_url']
		$("#video1").attr("src", '../static/videos/VIDEO_TRUE/' + vList1[0]);
		$("#video2").attr("src", '../static/videos/VIDEO_SR_CSRNET/' + vList2[0]);
		document.getElementById('td_id').value = dlist[0]
		// var video_one = document.querySelector("#video1");
		// var video_two = document.querySelector('#video2');
		var video_one = document.getElementById("video1");
		var video_two = document.getElementById("video2");

		video_one.load();
		video_one.pause();
		video_two.load();
		video_two.pause();



		$("#selectedgod").change(function () {
			var opt = $("#selected").val();
			console.log(opt);
		});
		$("#reload").click(function () {
			window.location.reload();
		});
		$("#leftgod").click(function () {
			var v1src = $("#video1")[0].src;
			JudgeVideo(v1src);
			changeinput()
		});
		$("#rightgod").click(function () {
			var v2src = $("#video2")[0].src;
			JudgeVideo(v2src);
			changeinput()
			console.log(ersr_same)
		});

		$("#almost").click(function () {
			var td_id = document.getElementById("td_id").value;
			ersr_same = ersr_same + td_id + ','
			changeinput()
			// nextVideo(1)
			same_count++
		});
		function JudgeVideo(vidoelink) {
			var yv = 'VIDEO_TRUE'
			var td_id = document.getElementById("td_id").value;
			if (vidoelink.match(yv)) {
				console.log('原视频')
				ersr_good = ersr_good + td_id + ','
				good_count++
			} else {
				console.log('超分视频')
				ersr_bad = ersr_bad + td_id + ','
				bad_count++
			}
		}
		function LoopCurrent() {
			var dq = 'VIDEO_TRUE'
			var v1src = $("#video1")[0].src;
			if (v1src.match(dq)) {
				return 1
			} else {
				return 2
			}
		}

		function changeinput() {
			var inputval = document.getElementById("schedule").value;
			var a = inputval.substring(0, 2);
			var a1 = inputval.substring(0, 1);
			// debugger;
			if (Number(a) >= 20) {
				$('#submit').removeAttr("disabled");
				$('#leftgod').attr("disabled", true);
				$('#rightgod').attr("disabled", true);
				$('#almost').attr("disabled", true);
				$('#playBtn').attr("disabled", true);
				VideoPause()
				$(function () { $('.popover-show').popover('show'); });
			} else {
				nextVideo(1)
			}
			var b = Number(a) + 1;
			if(Number(b)>20){
				b=20;
			}
			
			if (Number(a) == 09 || Number(a1) != 0) {
				var c = parseFloat(b) + inputval.substring(2)
			} else {
				var c = '0' + parseFloat(b) + inputval.substring(2)
			}
			
			document.getElementById('schedule').value = c

		}
		function nextVideo(WhetherChoose) {
			VideoPlay()
			var rn = randomNum(1, 100);
			if (WhetherChoose) {
				if (rn % 2 == 0) {
					$("#video1").attr("src", '../static/videos/VIDEO_TRUE/' + vList1[curr]);
					$("#video2").attr("src", '../static/videos/VIDEO_SR_CSRNET/' + vList2[curr]);
					document.getElementById('td_id').value = dlist[curr]
				} else {
					$("#video1").attr("src", '../static/videos/VIDEO_SR_CSRNET/' + vList2[curr]);
					$("#video2").attr("src", '../static/videos/VIDEO_TRUE/' + vList1[curr]);
					document.getElementById('td_id').value = dlist[curr]
				}
			} else {
				curr = getcurrVal(curr);
				lc = LoopCurrent();
				if (lc == 1) {
					$("#video1").attr("src", '../static/videos/VIDEO_TRUE/' + vList1[curr]);
					$("#video2").attr("src", '../static/videos/VIDEO_SR_CSRNET/' + vList2[curr]);
				} else {
					$("#video1").attr("src", '../static/videos/VIDEO_SR_CSRNET/' + vList2[curr]);
					$("#video2").attr("src", '../static/videos/VIDEO_TRUE/' + vList1[curr]);
				}

				document.getElementById('td_id').value = dlist[curr]
			}
			// 	if (curr==20){
			// 		$("#video1").attr("src",'../static/videos/VIDEO_TRUE/'+vList1[20]);
			// $("#video2").attr("src",'../static/videos/VIDEO_SR_CSRNET/'+vList2[20]);
			// 	}
			curr++;
			console.log(curr)
			if (curr >= vList1.length && curr >= vList2.length) {
				if (curr == 21) {
					curr = 20 //循环播放最后一个
					$('#submit').removeAttr("disabled");
					$(function () { $('.popover-show').popover('show'); });
					$('#leftgod').attr("disabled", true);
					$('#rightgod').attr("disabled", true);
					$('#almost').attr("disabled", true);
					// $('#playBtn').attr("disabled",true);
				} else {
					curr = 0; //重新循环播放
				}

			}
		}

		video1.on('ended', function () {
			nextVideo();
		});
		//生成从minNum到maxNum的随机数
		function randomNum(minNum, maxNum) {
			switch (arguments.length) {
				case 1:
					return parseInt(Math.random() * minNum + 1, 10);
					break;
				case 2:
					return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
					break;
				default:
					return 0;
					break;
			}
		}

		function getSettingVal() {
			var value = document.getElementById("selected").value;
			return value
		}
		function getVideoAfterPath(currentVideoPath) {

			c = currentVideoPath;
			afp = c.substring(0, c.length - 4) + '_after' + c.substring(c.length - 4);
			return afp;
		}
		function getVideoID(value) {
			if (c) {
				c = value.substring(c.length - 5, c.length - 4)
				return parseInt(c);
			}

		}
		function getcurrVal(value) {
			if (value == 0) {
				return 0
			} else {
				return value - 1
			}
		}
		//暂停
		function VideoPause() {
			$("#playBtn").css("display", "block");
			$("#pauseBtn").css("display", "none");
			video_one.pause();
			video_two.pause();
		}

		function VideoPlay() {

			$("#playBtn").css("display", "none");
			$("#pauseBtn").css("display", "block");
			// video_one.load();
			video_one.play();
			// video_two.load();
			video_two.play();
		}

		function SubmitLottery() {
			// var ersr_good='',ersr_bad='',ersr_same='';
			console.log("#@@@@@@################@@@@@@@@@@@@")
			$(function () { $('.popover-show').popover('hide'); });
			console.log('ersr_good:  ' + ersr_good);
			console.log('ersr_bad:  ' + ersr_bad);
			console.log('ersr_same:  ' + ersr_same);
			console.log('good_count:  ' + good_count);
			console.log('bad_count:  ' + bad_count);
			console.log('same_count:  ' + same_count);
			// return;
			$.ajax({
				type: 'post',
				async: true, //异步执行
				url: '/home/v1.1/video/postscore/', //路由加'/'否则会报ssh错误
				data: {
					'ersr_good': ersr_good,
					'ersr_bad': ersr_bad,
					'ersr_same': ersr_same,
				},
				dataType: 'json',
				success: function (data) {
					if (data == '1') {
						// alert('原始视频：'+(good_count/20)*100+'%'+'\n'+'超分后视频：'+(bad_count/20)*100+'%'+'\n'+'无差异的'+(same_count/20)*100+'%')
						document.getElementById('yuanshi').value = ((good_count * 100 / 20).toFixed(2) + '%')
						document.getElementById('chaofen').value = ((bad_count * 100 / 20).toFixed(2) + '%')
						document.getElementById('wuchayi').value = ((same_count * 100 / 20).toFixed(2) + '%')
					} else {
						alert('程序员要跪了！')
					}
				},
				error: function (errorMsg) {
					alert('程序员要疯了！')
				}

			})
		}
	</script>
</body>

</html>